<template>
  <div id="applyInvoiceEdit" style="position: relative">
    <div class="wrap">
      <div id="printJS-form">
        <div class="printJS-item">
          <div class="infoTitle">基础信息</div>
          <a-form :form="formBasics" @submit="basicsSubmit">
            <a-row :gutter="24">
              <a-col :span="8" v-for="(item, i) in basicsForm" :key="i" style="height:65px">
                <a-form-item
                  :label="item.title"
                  :label-col="{ span: 7 }"
                  :wrapper-col="{ span: 14 }"
                >
                  <template v-if="item.type === 'Date'">
                    <!-- <a-date-picker @change="onChangeDate(date, dateString, 'abc')"/> -->
                    <a-date-picker show-time @change="onChangeDate" @blur="upDateDate(item.dataIndex)" v-decorator="[item.dataIndex, { rules: item.rules }]"/>
                  </template>
                  <template v-else-if="item.type === 'TextCompany'">
                    <!-- 公司 -->
                    <a-input
                      :placeholder="item.title"
                      v-model="modelSelectData.phidAreaName"
                      @change="onChangeInputValue"
                      @click="showDiag('company')"/>
                  </template>
                  <template v-else-if="item.type === 'TextOrganization'">
                    <!-- 组织 -->
                    <a-input :placeholder="item.title" v-model="modelSelectData.phidOrgName" @click="showDiag('organization')"/>
                  </template>
                  <template v-else-if="item.type === 'TextProject'">
                    <!-- 项目 -->
                    <a-input :placeholder="item.title" v-model="modelSelectData.phidProjectName" @click="showDiag('project')"/>
                  </template>
                  <!-- 申请人 -->
                  <template v-else-if="item.type === 'TextRegister'">
                    <a-input :placeholder="item.title" v-model="modelSelectData.registerName" @click="showMemberDiag"/>
                  </template>
                  <!-- 申请人部门 -->
                  <template v-else-if="item.type === 'TextDepartment'">
                    <a-input :placeholder="item.title" v-model="modelSelectData.deptName" @click="showDeptDiag"/>
                  </template>
                  <template v-else-if="item.type === 'SelectBillstatus'">
                    <a-select v-model="currentBillState">
                      <a-select-option v-for="(item, index) in billState" :value="item" :key="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </template>
                  <template v-else-if="item.type === 'SelectDealstatus'">
                    <a-select v-model="currentDealstatus">
                      <a-select-option v-for="(item, index) in dealstatusArr" :value="item" :key="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </template>
                  <template v-else>
                    <a-input
                      v-decorator="[item.dataIndex, { rules: item.rules }]"
                      :placeholder="item.title"
                    />
                  </template>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>

          <div class="infoTitle">申请单明细</div>
          <div class="tableWrap">
          <!--<div class="table-operations">
                <a-button type="primary" @click="showModal">
                  添加申请单明细
                </a-button>
              </div>
              <DataTable
                :showConfig="false"
                :tableData="dealApplyDetailVOList"
                :tableColumn="applicationListColumns">
              </DataTable>-->
              <a-button class="editable-add-btn" @click="handleAdd">
                添加申请单明细
              </a-button>
              <a-table bordered :data-source="dealApplyDetailVOList" :columns="applicationListColumns">
                  <template slot="matrialCode" slot-scope="text, record">
                    <a-input @click="showMaterialDiag(record.key, 'matrialCode', $event)" />
<!--                    <editable-cell :text="text"   @change="onCellChange2(record.key, 'matrialCode', $event)" />-->
                  </template>
                  <template slot="dealReason" slot-scope="text, record">
                    <editable-cell :text="text" @change="onCellChange2(record.key, 'dealReason', $event)" />
                  </template>
                  <template slot="num" slot-scope="text, record">
                    <editable-cell :text="text" @change="onCellChange2(record.key, 'num', $event)" />
                  </template>
                  <template slot="taxRate" slot-scope="text, record">
                    <editable-cell :text="text" @change="onCellChange2(record.key, 'taxRate', $event)" />
                  </template>
                  <template slot="memo" slot-scope="text, record">
                    <editable-cell :text="text" @change="onCellChange2(record.key, 'memo', $event)" />
                  </template>
                  <template slot="operation" slot-scope="text, record">
                    <a-popconfirm
                      v-if="dealApplyDetailVOList.length"
                      title="确定删除?"
                      @confirm="() => onDelete(record.key)"
                    >
                      <a href="javascript:;">删除</a>
                    </a-popconfirm>
                  </template>
                  <template slot="quote" slot-scope="text, record">
                    <a-space
                      @click="() => quotedPrice(record.key)"
                    >
                      <a href="javascript:;">报价</a>
                    </a-space>
                  </template>
              </a-table>
          </div>
          <div class="infoTitle">相关附件</div>
          <div>
            <div class="upload-pic">
              <upload-pic ref="uploadPic" :limitNum="2" @change="upLoadChange" :defaultImageList="fileList" />
            </div>
          </div>
          <!--   底部按钮   -->
          <div class="footer-btns">
            <a-button type="primary" @click="goBack">返回</a-button>
            <a-button type="primary" @click="handleSubmit">提交申请单</a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择物资弹窗 -->
    <a-modal title="选择物资" width="800px" :visible="materialFormVisible" @ok="handleChoose" @cancel="handleCancel">
      <a-row>
        <a-col :span="24">
          <DataTable
            rowKey="goodsCode"
            :tableData="materialData"
            :tableColumn="materialTableColumn"
            :pageConfig="materialPageConfig"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @refresh="getNcMaterialList"
          />
        </a-col>
      </a-row>
    </a-modal>
    <!-- 选择申请人弹窗 -->
    <a-modal title="选择申请人" :visible="memberFormVisible" @cancel="hideMemberFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">人员名称：</div>
            <a-input-search placeholder="请选择申请人 " style="width: 200px" v-model="searchMember.name" @search="searchMem"/>
          </div>
          <DataTable rowKey="phidApplyman"  :showConfig="false" :tableData="Data" :tableColumn="memberColumn" :pageConfig="memberPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>
    <!-- 选择申请人部门弹窗 -->
    <a-modal title="选择申请人部门" :visible="deptFormVisible" @cancel="hideDeptFormVisible" :footer="null" width="50%" >
      <div>
        <div>
          <div>
            <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">部门名称：</div>
            <a-input-search placeholder="请选择申请人部门 " style="width: 200px" v-model="searchDept.name" @search="searchDepts"/>
          </div>
          <DataTable rowKey="phidDept"  :showConfig="false" :tableData="Data" :tableColumn="deptColumn" :pageConfig="deptPageConfig"></DataTable>
        </div>
      </div>
    </a-modal>

    <!-- ============================== modal ==================================== -->
    <a-modal
      v-model="visible"
      width="800px"
      title="添加申请单明细"
      :ok-button-props="{ props: { disabled: false } }"
      :cancel-button-props="{ props: { disabled: false } }"
      @ok="addApplication"
    >
      <a-form :ref="formModal" :form="formModal">
        <a-row :gutter="24">
          <a-col :span="12" v-for="(item, i) in applicationModalForm" :key="i">
            <a-form-item
              :label="item.title"
              :label-col="{ span: 11, offset: 1 }"
              :wrapper-col="{ span: 12 }"
            >
              <template v-if="item.type === 'Number'">
                <a-input-number
                  v-decorator="[item.dataIndex, { rules: item.rules }]"
                  :placeholder="'请填写' + item.title"
                />
              </template>
              <template v-else>
                <a-input
                  v-decorator="[item.dataIndex, { rules: item.rules }]"
                  :placeholder="'请填写' + item.title"
                />
              </template>

            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 填写报价弹框 -->
    <a-modal
      v-model="visibleQuotedPrice"
      width="800px"
      title="填写报价信息"
      :ok-button-props="{ props: { disabled: false } }"
      :cancel-button-props="{ props: { disabled: false } }"
      @ok="serveQuotedPrice"
    >
      <div class="button-price">
        <a-button class="editable-add-btn" @click="addQuotedPrice" type="primary" :disabled="quotedPriceList.length > 2">添加</a-button>
        <!-- <a-button class="editable-del-btn" @click="delQuotedPrice">删除</a-button> -->
        </div>
        <div class="header-price">
          <span prop="物资编码:" v-text="applyDetailList.matrialCode"></span>
          <span prop="物资名称:" v-text="applyDetailList.matrialName"></span>
          <span prop="单位:" v-text="applyDetailList.unitName"></span>
        </div>
        <div>
        <a-table bordered :data-source="quotedPriceList" :columns="quotedPriceColumns">
          <template slot="purchaser" slot-scope="text, record">
            <editable-cell :text="text" @change="onCellChange(record.key, 'purchaser', $event)" />
          </template>
          <template slot="phone" slot-scope="text, record">
            <editable-cell :text="text" @change="onCellChange(record.key, 'phone', $event)" />
          </template>
          <template slot="price" slot-scope="text, record">
            <editable-cell :text="text" @change="onCellChange(record.key, 'price', $event)" />
          </template>
          <template slot="choose" slot-scope="text, record">
            <a-switch default-unchecked @change="onCellChange(record.key, 'choose', $event)" />
<!--            <editable-cell :text="text" @change="onCellChange(record.key, 'choose', $event)" />-->
          </template>
          <template slot="operation" slot-scope="text, record">
            <a-popconfirm
              v-if="quotedPriceList.length"
              title="是否确认删除？"
              @confirm="() => delQuotedPrice(record.key)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
    </a-modal>
    <a-modal
      :visible="formVisible"
      title="请选择相应内容"
      @cancel="hideProjectVisible"
      :footer="null"
      width="70%">
      <div>
        <!--
        <div>
          <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">项目：</div>
          <a-input-search placeholder="请输入项目名称 " style="width: 200px" v-model="searchModalKeyword" @search="searchWl"/>
        </div>
        -->
        <DataTable :showConfig="false" :tableData="currentModal.list" :tableColumn="tableColumn" :pageConfig="pageConfig"></DataTable>
      </div>
    </a-modal>
    <!-- ============================== modal end ==================================== -->
  </div>
</template>
<script>

// import btns from '../../components/Btns/index.ts'
import uploadPic from '../uploadPic.vue'
import editableCell from '../editableCell.vue'
export default {
  name: 'applyInvoiceEdit',
  components: { uploadPic, editableCell },
  data () {
    return {
      count: 0,
      currentModal: {type: '', name: '', id: '', list: []}, // 使用判断当前弹窗列表
      currentDate: '', // 当前操作的基础信息日期
      objDate: {},
      formBasics: this.$form.createForm(this, { name: 'formBasics' }),
      searchModalKeyword: '',
      materialFormVisible: false,
      modelSelectData: {
        phidArea: '', // 区域分公司ID
        phidAreaName: '', // 区域分公司name
        phidOrg: '', // 组织ID
        phidOrgName: '', // 组织name
        phidProject: '', // 项目ID
        phidProjectName: '', // 项目name
        matrialName: '', // 物料name
        registerName: '', // 申请人
        deptName: '', // 申请人部门
        telephone: '', // 申请人电话
        phidDept: '' // 部门id
      },
      basicsForm: [
        // 基础信息 表单
        { type: 'TextOrganization', title: '组织名称', dataIndex: 'orgName', rules: [{ required: true, message: '请输入组织名称' }] },
        { type: 'TextCompany', title: '分公司名称', dataIndex: 'complanyName', rules: [{ required: true, message: '请输入分公司名称' }] },
        { type: 'TextProject', title: '项目', dataIndex: 'projectName', rules: [{ required: true, message: '请输入项目' }] },
        { type: 'Text', title: '单据编码', dataIndex: 'billcode', disabled: true},
        { type: 'Date', title: '单据日期', dataIndex: 'billdate', rules: [{ required: true, message: '请输入单据日期' }] },
        { type: 'TextRegister', title: '申请人', dataIndex: 'registerName' },
        { type: 'TextDepartment', title: '申请人部门', dataIndex: 'deptName' },
        { type: 'Text', title: '申请人电话', dataIndex: 'telephone', rules: [{ required: true, message: '请输入电话' }] },
        { type: 'Date', title: '申请处理日期', dataIndex: 'dealdate', rules: [{ required: true, message: '请输入申请处理日期' }] },
        { type: 'Text', title: '项目附件银行', dataIndex: 'bankName'},
        { type: 'Text', title: '银行地址', dataIndex: 'address'},
        { type: 'Text', title: '银行距离', dataIndex: 'distance'},
        { type: 'Text', title: '备注', dataIndex: 'memo'},
        { type: 'Text', title: '单据类型编码', dataIndex: 'billtype', rules: [{ required: true, message: '请输入单据类型编码' }]},
        { type: 'SelectDealstatus', title: '处理状态', dataIndex: 'dealstatus'},
        { type: 'SelectBillstatus', title: '单据状态', dataIndex: 'billstatus'}
      ],
      dealApplyHeadVO: {state: false}, // 基础信息
      visible: false, // v-modal 显示状态
      applicationModalForm: [
        // 申请单明细 添加 表单
        { type: 'Text', title: '多家收购商报价信息', dataIndex: 'bjInfo', rules: [{ required: true, message: '请输入多家收购商报价信息' }] },
        { type: 'Number', title: '实际处理数量', dataIndex: 'dealNum'},
        { type: 'Text', title: '处理原因', dataIndex: 'dealReason'},
        { type: 'Number', title: '变更后数量', dataIndex: 'hisNum'},
        { type: 'Number', title: '收购商报价', dataIndex: 'hisPrice', rules: [{ required: true, message: '请输入收购商报价' }] },
        { type: 'Text', title: '物料名称', dataIndex: 'matrialName'},
        { type: 'Text', title: '备注', dataIndex: 'memo'},
        { type: 'Number', title: '申请数量', dataIndex: 'num', rules: [{ required: true, message: '申请数量' }] },
        { type: 'Text', title: '中标收购商电话号码', dataIndex: 'telephone', rules: [{ required: true, message: '请输入中标收购商电话号码' }] },
        { type: 'Text', title: '单位名称', dataIndex: 'unitName', rules: [{ required: true, message: '请输入单位名称' }] },
        { type: 'Number', title: '最终定价', dataIndex: 'taxRate', rules: [{ required: true, message: '请输入最终定价' }] },
        { type: 'Text', title: '中标收购商ID', dataIndex: 'phidBjinfo', rules: [{ required: true, message: '请输入中标收购商ID' }] },
        { type: 'Text', title: '物料主键id', dataIndex: 'phidMaterial', rules: [{ required: true, message: '请输入物料主键id' }] },
        { type: 'Text', title: '单位主键id', dataIndex: 'phidUnit', rules: [{ required: true, message: '请输入单位主键id' }] },
        { type: 'Text', title: '行号', dataIndex: 'rowno', rules: [{ required: true, message: '请输入行号' }] }
      ],
      /*
      applicationListColumns: [
        // 申请单明细 列表 回显配置
        { type: 'Text', title: '多家收购商报价信息', dataIndex: 'bjInfo', width: 120 },
        { type: 'Number', title: '实际处理数量', dataIndex: 'dealNum', width: 120 },
        { type: 'Text', title: '处理原因', dataIndex: 'dealReason', width: 120 },
        { type: 'Number', title: '变更后数量', dataIndex: 'hisNum', width: 120 },
        { type: 'Number', title: '收购商报价', dataIndex: 'hisPrice', width: 120 },
        { type: 'Text', title: '物料名称', dataIndex: 'matrialName', width: 120 },
        { type: 'Text', title: '备注', dataIndex: 'memo', width: 120 },
        { type: 'Number', title: '申请数量', dataIndex: 'num', width: 120 },
        { type: 'Text', title: '中标收购商电话号码', dataIndex: 'telephone', width: 120 },
        { type: 'Text', title: '单位名称', dataIndex: 'unitName', width: 120 },
        { type: 'Text', title: '最终定价', dataIndex: 'taxRate', width: 120 },
        { type: 'Text', title: '行号', dataIndex: 'rowno', width: 120 }
      ],
      */
     visibleQuotedPrice: false, // v-modal 报价显示状态
      applicationListColumns: [
        {title: '行号', dataIndex: 'rowno', scopedSlots: { customRender: 'rowno' }},
        {title: '物资编码', dataIndex: 'matrialCode', scopedSlots: { customRender: 'matrialCode' }},
        {title: '物资名称', dataIndex: 'matrialName', scopedSlots: { customRender: 'matrialName' }},
        {title: '单位', dataIndex: 'unitName', scopedSlots: { customRender: 'unitName' }},
        {title: '申请数量', dataIndex: 'num', scopedSlots: { customRender: 'num' }},
        {title: '处理原因', dataIndex: 'dealReason', scopedSlots: { customRender: 'dealReason' }},
        {title: '收购商报价信息', dataIndex: 'bjInfo', scopedSlots: { customRender: 'bjInfo' }},
        {title: '推荐收购商', dataIndex: 'sgsName', scopedSlots: { customRender: 'sgsName' }},
        {title: '电话号码', dataIndex: 'telephone', scopedSlots: { customRender: 'telephone' }},
        {title: '收购商报价', dataIndex: 'hisPrice', scopedSlots: { customRender: 'hisPrice' }},
        {title: '最终定价', dataIndex: 'taxRate', scopedSlots: { customRender: 'taxRate' }},
        {title: '备注', dataIndex: 'memo', scopedSlots: { customRender: 'memo' }},
        {title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation'}},
        {title: '报价', dataIndex: 'quote', scopedSlots: { customRender: 'quote'}}
      ],
      quotedPriceList: [], // temp 临时保存报价列表
      applyDetailList: [], // temp 临时保存详情行信息
      quotedPriceColumns: [ // 报价列表配置
        // {title: '行号', dataIndex: 'key'},
        {title: '收购商', dataIndex: 'purchaser', scopedSlots: { customRender: 'purchaser' }},
        {title: '收购商电话', dataIndex: 'phone', scopedSlots: { customRender: 'phone' }},
        {title: '报价单价', dataIndex: 'price', scopedSlots: { customRender: 'price' }},
        {title: '是否中标', dataIndex: 'choose', scopedSlots: { customRender: 'choose' }},
        {title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' }}
      ],
      dealApplyDetailVOList: [],
      formModal: this.$form.createForm(this, { name: 'formModal' }),
      fileList: [], // 图片回显
      showUploadList: [],
      btnsConfig: [
        {
          label: '上传文件',
          upload: true,
          accept: '.doc,.docx,.rar,.zip,.pdf,.jpg,.png',
          callback: (res) => this.uploadSuccess(res.fileList)
        }
      ],
      countingTaskFileList: [], // 附件
      tableColumn: { },
      pageConfig: { current: 1, total: 10, pageSize: 10, onChange: this.changePage }, // 分页参数
      formVisible: false,
      memberFormVisible: false,
      deptFormVisible: false,
      deptName: '',
      billState: ['已提交', '已送审', '审批通过', '审批不通过'], // 单据状态
      currentBillState: '', // 当前所选的单据状态
      dealstatusArr: ['未完成', '已完成'], // 处理状态名称
      currentDealstatus: '', // 当前所选的处理状态
      treeId: '',
      selectData: [], // 选择的物资
      pkMaterial: [],
      materialData: [], // 物资列表
      materialList: [], // 物料列表
      Data: [],
      selectedRowKeys: [],
      materialTableColumn: {
        phidMaterial: {
          label: '物资ID',
          width: 120
        },
        code: {
          label: '物资编码',
          width: 120
        },
        name: {
          label: '物资名称',
          width: 200
        },
        measdocName: {
          label: '单位',
          width: 200
        }
        // before_num: {
        //   label: '规格',
        //   width: 120
        // },
        // later_num: {
        //   label: '型号',
        //   width: 120
        // },
        // later_num1: {
        //   label: '单位',
        //   width: 120
        // },
        // change_price: {
        //   label: '采购价',
        //   width: 120
        // }
      },
      materialPageConfig: {
        current: 1,
        total: 0,
        pageSize: 10,
        onChange: this.changeMaterialPage
      },
      searchMember: {
        name: ''
      },
      searchDept: {
        name: ''
      },
      // 人员列表分页参数
      memberPageConfig: {
        current: 1,
        total: 10,
        pageSize: 5,
        onChange: this.memberChangePage
      },
      // 部门列表分页参数
      deptPageConfig: {
        current: 1,
        total: 10,
        pageSize: 5,
        onChange: this.deptChangePage
      },
      // 人员弹窗明细
      memberColumn: {
        memberAccount: {
          label: '人员账号',
          minWidth: 60
        },
        memberName: {
          label: '人员名称',
          minWidth: 60
        },
        memberPhone: {
          label: '电话',
          minWidth: 60
        },
        action: {
          label: '操作',
          width: 100,
          template: [
            {
              tag: 'a',
              text: '确定',
              callback: this.confirmMember
            }
          ]
        }
      },
      // 部门弹窗明细
      deptColumn: {
        deptCode: {
          label: '部门编码',
          minWidth: 60
        },
        deptName: {
          label: '部门名称',
          minWidth: 60
        },
        orgName: {
          label: '组织名称',
          minWidth: 60
        },
        action: {
          label: '操作',
          width: 100,
          template: [
            {
              tag: 'a',
              text: '确定',
              callback: this.confirmDept
            }
          ]
        }
      }
    }
  },
  created () {
    this.init() // 初始化数据
  },
  mounted () {
    // 在 DOM 渲染完毕后初始化 better-scroll
    this.$nextTick(() => {
      // this.init()
    })
  },
  methods: {
    init () { // 初始化数据
      const phid = this.$route.query.phid
      if (phid) { this.getDetail(phid) }
      // console.log(this.$enums.acceptanceList.bill)
    },
    getDetail (phid) {
      this.$api.dealApplyDetailFetch({phid}).then(({ data }) => {
        // console.log(data)
        this.formBasics.setFieldsValue(data.dealApplyHeadVO) // 基础信息
        this.dealApplyDetailVOList = data.dealApplyDetailVOList // 申请单明细
        this.fileList = data.fileStoreList // 图片信息
        const modelSelectData = {
          phidArea: data.dealApplyHeadVO.phidArea, // 区域分公司ID
          phidAreaName: data.dealApplyHeadVO.complanyName, // 区域分公司name
          phidOrg: data.dealApplyHeadVO.phidOrg, // 组织ID
          phidOrgName: data.dealApplyHeadVO.orgName, // 组织name
          phidProject: data.dealApplyHeadVO.phidProject, // 项目ID
          phidProjectName: data.dealApplyHeadVO.projectName // 项目name
        }
        this.currentBillState = this.billState[data.dealApplyHeadVO.billstatus] // 单据状态
        this.currentDealstatus = this.dealstatusArr[data.dealApplyHeadVO.dealstatus] // 处理状态
        this.modelSelectData = Object.assign(modelSelectData)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 打开项目选择弹窗
    showDiag (type) {
      this.currentModal.type = type
      this.getModelList()
      this.formVisible = true
    },
    // 关闭项目弹窗
    hideProjectVisible () {
      this.currentModal.type = ''
      this.formVisible = false
    },
    // 切换页面
    changePage (val) {
      this.pageConfig.current = val;
      this.getModelList();
    },
    searchWl (val) {
      // alert(val);
      this.searchModalKeyword.name = val
      this.getModelList()
    },
    // 弹窗 确实后 的 操作
    confirmModel (val, cb) {
      console.log(val, cb)
      const currentModal = this.currentModal
      if (currentModal.type && currentModal.type === 'company') { // 公司
        this.modelSelectData.phidArea = val.areaId // 公司ID
        this.modelSelectData.phidAreaName = val.areaName // 公司name
      } else if (currentModal.type && currentModal.type === 'organization') { // 组织
        this.modelSelectData.phidOrg = val.unitId // 组织ID
        this.modelSelectData.phidOrgName = val.unitName // 组织name
      } else if (currentModal.type && currentModal.type === 'project') { // 项目
        this.modelSelectData.phidProject = val.ncProjectId
        this.modelSelectData.phidProjectName = val.ncProjectName
      } else {
        console.log('currentModal.type 值为空')
      }
      this.searchModalKeyword = ''
      this.hideProjectVisible()
    },
    // 获取弹窗列表
    getModelList () {
      const currentModal = this.currentModal
      const tableColumnAction = {action: { label: '操作', width: 120, template: [ { tag: 'a', text: '确定', callback: this.confirmModel } ]}}
      let word = this.searchModalKeyword
      let { current, pageSize } = this.pageConfig
      let data = {}
      data.page = current
      data.size = pageSize
      if (word) { data.searchValue = word }
      if (currentModal.type && currentModal.type === 'company') { // 公司
        const tableColumnCompany = { areaId: { label: '公司ID', minWidth: 120}, areaName: { label: '公司名称', minWidth: 120, hidden: true }}
        this.tableColumn = Object.assign(tableColumnCompany, tableColumnAction)
        this.$api.projectDeptAreaFetch(data).then((res) => {
          this.currentModal.list = res.data
          // console.log(res.data)
          this.pageConfig.total = res.data.total;
        }).catch()
      } else if (currentModal.type && currentModal.type === 'organization') { // 组织
        const tableColumnOrganization = { unitId: { label: '组织ID', minWidth: 120}, unitName: { label: '组织名称', minWidth: 120, hidden: true }}
        this.tableColumn = Object.assign(tableColumnOrganization, tableColumnAction)
        this.$api.analysisOrganizationListFetch(data).then((res) => {
          this.currentModal.list = res.data
          // console.log(res.data)
          this.pageConfig.total = res.data.total;
        }).catch()
      } else if (currentModal.type && currentModal.type === 'project') { // 项目
        const tableColumnProject = { ncProjectId: { label: '项目编码', minWidth: 120}, ncProjectName: { label: '项目名称', minWidth: 120, hidden: true }}
        this.tableColumn = Object.assign(tableColumnProject, tableColumnAction)
        this.$api.docInfoProjectListFetch(data).then((res) => {
          this.currentModal.list = res.data.records
          // console.log(res.data)
          this.pageConfig.total = res.data.total;
        }).catch()
      } else {
        console.log('currentModal.type 值为空')
      }
    },
    // 打开物料选择弹窗
    showMaterialDiag (key, dataIndex, value) {
      this.materialFormVisible = true
      const dataSource = [...this.dealApplyDetailVOList];
      const target = dataSource.find(item => item.key === key);
      this.applyDetailList = target;
      console.log(this.applyDetailList, 99999999999)
      if (target) {
        target[dataIndex] = value;
        this.dealApplyDetailVOList = dataSource;
      }
      // this.getNcMaterialList()
    },
    // 选择物资确定
    handleChoose () {
      // this.selectData.forEach((ele: any, index: number) => {
      //   this.$set(this.selectData[index], 'countingTaskGoodsFiles', [])
      //   this.$set(this.selectData[index], 'goodsSum', 0)
      // })
      this.Data = this.Data.concat(this.selectData)
      // let setMap = new Map()
      // this.Data.map((item: any) => setMap.set(item.goodsCode, item))
      // this.Data = [...setMap.values()]
      this.handleCancel()
    },
    handleCancel () {
      this.materialFormVisible = false
      this.selectData = []
      this.selectedRowKeys = []
    },
    // 复选物资
    onSelectChange (selectedRowKeys, row) {
      this.selectedRowKeys = selectedRowKeys
      this.selectData = row
      console.log(this.selectData, 8888)
      this.applyDetailList.matrialName = this.selectData[0].name;
      this.applyDetailList.matrialCode = this.selectData[0].code;
      this.applyDetailList.unitName = this.selectData[0].measdocName;
    },
    // 获取NC物料
    getNcMaterialList () {
      let { current, pageSize } = this.materialPageConfig
      let data = {
        page: current,
        size: pageSize,
        id: this.treeId
      }
      this.$api.docInfoWuLiaoListFetch(data).then((res) => {
        this.materialData = res.data.records.map((item) => ({phidMaterial: item.pkMaterial, code: item.code, name: item.name, measdocName: item.measdocName}))
        this.materialList = res.data
        this.materialPageConfig.total = res.data.total
        if (!this.materialData.length && this.materialPageConfig.current > 1) {
          --this.materialPageConfig.current
          this.getNcMaterialList()
        }
      })
    },
    onChangeInputValue (e) {
      console.log('onChangeInputValue', e)
      // this.form.setFieldsValue({ })
    },
    upDateDate (e) {
      this.currentDate = e
    },
    onChangeDate (date, dateString) {
      this.objDate[this.currentDate] = dateString
      console.log(date, dateString, this.objDate);
    },
    basicsSubmit () { // 验证基础信息
      this.formBasics.validateFields((err, values) => {
        if (!err) {
          this.dealApplyHeadVO.state = true
          this.dealApplyHeadVO = Object.assign(this.dealApplyHeadVO, values, this.objDate)
        } else {
          // this.$message.warning('请输入必填基础信息')
          return false
        }
      })
    },
    handleChange () {
      console.log('handleChange')
    },
    showModal () { // 添加申请单明细
      this.visible = true
    },
    // 添加明细
    addApplication (e) {
      this.formModal.validateFields((err, values) => {
        console.log(err)
        console.log(values)
        if (!err) {
          // console.info('success');
          // console.log(values)
          this.dealApplyDetailVOList.push(values)
          this.visible = false
        } else {
          this.$message.warning('请填写必填数据')
          console.log(err)
        }
      })
    },
    // 添加明细 - 报价
    quotedPrice (item, index) {
      this.visibleQuotedPrice = true
      console.log('添加明细 - 报价', item, index)
    },
    // 保存 - 报价
    serveQuotedPrice () {
      this.visibleQuotedPrice = false
      this.applyDetailList.sgsName = this.quotedPriceList.sgsName
      this.applyDetailList.hisPrice = this.quotedPriceList.hisPrice
      console.log('保存 - 报价')
    },
    // 添加报价
    addQuotedPrice () {
      const dataSource = this.quotedPriceList;
      const newData = {
        key: dataSource.length + 1,
        purchaser: `请输入收购商 ${dataSource.length + 1}`,
        phone: 13411111111,
        price: 100,
        choose: 0,
        address: `London, Park Lane no. ${dataSource.length}`
      };
      this.quotedPriceList = [...dataSource, newData];
      this.quotedPriceList.matrialName = this.applyDetailList.matrialName;
      this.quotedPriceList.matrialCode = this.applyDetailList.matrialCode;
      this.quotedPriceList.unitName = this.applyDetailList.measdocName;
    },
    onCellChange (key, dataIndex, value) {
      console.log(key, dataIndex, value)
      const dataSource = [...this.quotedPriceList];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.quotedPriceList = dataSource;
      }
    },
    // 删除报价
    delQuotedPrice (key) {
      const dataSource = [...this.quotedPriceList];
      this.quotedPriceList = dataSource.filter(item => item.key !== key);
      /*
      this.quotedPriceList.forEach((k, i) => {
        k.key = i + 1
      })
      console.log(this.quotedPriceList)
      */
    },
    uploadSuccess (fileList) {
      this.countingTaskFileList = fileList
      let list = JSON.parse(JSON.stringify(this.countingTaskFileList))
      this.showUploadList = list.map((item) => ({
        url: this.$util.getPicUrl(item)
      }))
    },
    // 上传图片
    upLoadChange (e) {
      console.log(e)
      this.fileList = [...e]
      // console.log('e', this.fileList)
    },
    // 返回
    goBack () {
      this.$router.back()
    },
    // 提交新增申请单
    handleSubmit (is_save) {
      this.basicsSubmit()
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      const modelSelectData = this.modelSelectData
      // 预设参数值
      const parameter = {
        phid: '',
        dealApplyHeadVO: { // 申请单表头
          phidApplyman: userInfo.adminId	// 申请人ID
        },
        dealApplyDetailVOList: [], // 申请单明细
        fileStoreList: [], // 图片列表
        is_save
      }
      // debugger
      // 合并相关参数
      parameter.dealApplyHeadVO = Object.assign(parameter.dealApplyHeadVO, this.dealApplyHeadVO, modelSelectData)
      if (!parameter.dealApplyHeadVO.state) {
        this.$message.warning('请输入基础信息')
        return
      }
      /*
        const modelSelectData = {
          phidArea: data.dealApplyHeadVO.phidArea, // 区域分公司ID
          phidAreaName: data.dealApplyHeadVO.complanyName, // 区域分公司name
          phidOrg: data.dealApplyHeadVO.phidOrg, // 组织ID
          phidOrgName: data.dealApplyHeadVO.orgName, // 组织name
          phidProject: data.dealApplyHeadVO.phidProject, // 项目ID
          phidProjectName: data.dealApplyHeadVO.projectName // 项目name
        }
      */
      parameter.dealApplyHeadVO.complanyName = parameter.dealApplyHeadVO.phidAreaName
      parameter.dealApplyHeadVO.orgName = parameter.dealApplyHeadVO.phidOrgName
      parameter.dealApplyHeadVO.projectName = parameter.dealApplyHeadVO.phidProjectName
      delete parameter.dealApplyHeadVO['state']
      if (this.dealApplyDetailVOList.length < 1) { return this.$message.warning('请添加申请单明细！') }
      // if (this.dealApplyDetailVOList.length < 1) { return this.$message.warning('请添加申请单明细！') }
      parameter.dealApplyDetailVOList = JSON.parse(JSON.stringify(this.dealApplyDetailVOList))
      parameter.fileStoreList = JSON.parse(JSON.stringify(this.fileList))
      const phid = this.$route.query.phid
      if (phid) { // 如果有 phid 就进行付值
        parameter.dealApplyHeadVO.phid = phid
        parameter.phid = phid
      }
      if (this.currentBillState) { // 单据状态
        parameter.dealApplyHeadVO.billstatus = this.billState.findIndex((item) => item === this.currentBillState)
      }
      if (this.currentBillState) { // 处理状态
        parameter.dealApplyHeadVO.dealstatus = this.dealstatusArr.findIndex((item) => item === this.currentDealstatus)
      }
      console.log(parameter)
      this.$api.dealApplyAddModifyFetch(parameter).then((res) => {
        console.log(res)
        this.$message.success(`${is_save === 1 ? '保存' : '编辑'}成功`)
        this.$router.back()
      })
    },
    handleAdd () {
      const dataSource = this.dealApplyDetailVOList;
      const newData = {
        key: dataSource.length + 1,
        rowno: '',
        matrialCode: '',
        bjInfo: '',
        dealNum: '',
        dealReason: '',
        hisNum: '',
        hisPrice: '',
        num: '',
        telephone: '',
        unitName: '',
        taxRate: '',
        memo: ''
      };
      this.dealApplyDetailVOList = [...dataSource, newData];
    },
    onCellChange2 (key, dataIndex, value) {
      const dataSource = [...this.dealApplyDetailVOList];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dealApplyDetailVOList = dataSource;
      }
    },
    onDelete (key) {
      const dataSource = [...this.dealApplyDetailVOList];
      this.dealApplyDetailVOList = dataSource.filter(item => item.key !== key);
    },
    // 打开人员选择弹窗
    showMemberDiag () {
      this.memberFormVisible = true
      this.getMemberList()
    },
    // 打开部门选择弹窗
    showDeptDiag () {
      this.deptFormVisible = true
      this.getDeptList()
    },
    // 人员列表切换页面
    memberChangePage (val) {
      this.memberPageConfig.current = val;
      this.getMemberList();
    },
    // 人员部门切换页面
    deptChangePage (val) {
      this.deptPageConfig.current = val;
      this.getDeptList();
    },
    // 关闭申请人弹窗
    hideMemberFormVisible () {
      this.memberFormVisible = false;
    },
    // 关闭申请人部门弹窗
    hideDeptFormVisible () {
      this.deptFormVisible = false;
    },
    // 查询人员列表
    searchMem (val) {
      this.searchMember.name = val
      this.getMemberList()
    },
    // 查询部门列表
    searchDepts (val) {
      this.searchDept.name = val
      this.getDeptList()
    },
    // 获取人员列表
    getMemberList () {
      let word = this.searchMember.name
      let { current, pageSize } = this.memberPageConfig
      let data = {}
      data.page = current
      data.size = pageSize
      if (word) {
        data.searchValue = word
      }
      this.$api.docInfoMemberListFetch(data).then((res) => {
        this.Data = res.data.records
        this.memberPageConfig.total = res.data.total;
      }).catch()
    },
    // 获取部门列表
    getDeptList () {
      let word = this.searchDept.name
      let { current, pageSize } = this.deptPageConfig
      let data = {}
      data.page = current
      data.size = pageSize
      if (word) {
        data.searchValue = word
      }
      this.$api.docInfoDeptListFetch(data).then((res) => {
        this.Data = res.data.records
        this.deptPageConfig.total = res.data.total;
      }).catch()
    },
    // 确定人员
    confirmMember (val, cb) {
      console.log(val, 889998887776)
      this.modelSelectData.telephone = val.memberPhone
      console.log(this.formBasics.telephone, 3333333333)
      // this.form.deptName = val.deptNames
      this.modelSelectData.phidApplyman = val.memberId
      this.modelSelectData.phidUser = val.memberId
      this.modelSelectData.registerName = val.memberName
      this.memberFormVisible = false
    },
    // 确定部门
    confirmDept (val, cb) {
      this.modelSelectData.phidDept = val.pkDept
      this.modelSelectData.deptName = val.deptName
      this.deptFormVisible = false
    }

  }
}
</script>
<style lang='scss' scoped>
.button-price{
  button{
    margin:0 10px;
  }
}
.header-price{
  display: flex;
  margin: 20px auto;
  span{
    flex:1;
  }
}

.footer-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
  .ant-btn {
    margin-right: 20px;
  }
}
.form-btn {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  z-index: 999999;
  .btn {
    margin: 10px 10px 0 0;
  }
}
.wrap {
  // margin: 0 20px;
  min-width: 960px;
  min-height: calc(100vh - 203px);
  padding: 0 25px;
  #printJS-form {
    .printJS-item {
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;
      .yszf_wrap {
        padding: 30px 24px;
        display: flex;
        flex-wrap: wrap;
        div {
          margin-bottom: 10px;
        }
      }
      .stepWrap {
        padding: 30px 24px;
        display: flex;
        .step-left {
          width: 58%;
          padding-right: 40px;
        }
        .step-right {
          border-left: 1px solid #ccc;
          padding: 4px 26px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }
      }
      .infoTitle {
        padding: 24px;
        border-bottom: 1px solid #d8d8d8;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        position: relative;
        &::after {
          content: '';
          width: 4px;
          height: 20px;
          background: #437dfc;
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row {
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
        .form-col {
          width: 25%;
          flex-shrink: 0;
        }
      }
      /deep/ .ant-form-item {
        margin-bottom: 10px;
      }
      .tableWrap {
        padding: 30px 24px;
      }
      .table-wrap {
        width: 1000px;
        display: flex;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        padding: 30px 24px;
        .table-item {
          width: 33.33%;
          display: flex;
          align-items: center;
          line-height: 50px;
          border: 1px solid #d9d9d9;
          .item-label {
            padding: 0 8px;
            width: 122px;
            border-right: 1px solid #d9d9d9;
            background: rgb(244, 244, 244);
            font-weight: bold;
            text-align: center;
          }
          .item-right {
            padding: 0 8px;
            width: calc(100% - 122px);
          }
        }
      }
      .imgWrap {
        padding: 0 24px;
        div {
          margin: 0 20px 20px 0;
          .label {
            font-size: 14px;
            color: #000000;
          }
          .img-item {
            width: 220px;
            height: 220px;
            margin: 10px 10px 10px 0;
          }
        }
      }
      .ysccWrap {
        padding: 24px;
        .ysqk-item {
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .label {
            color: #000000;
            font-size: 14px;
          }
          .ysqk-text {
            width: 1148px;
            height: 104px;
            margin-top: 10px;
            padding: 14px 20px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: #000;
          }
        }
        .ysqk-img {
          display: flex;
          .ysqk-img-l {
            display: flex;
            flex-direction: column;
            div {
              display: flex;
              flex-wrap: wrap;
              img {
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
          .ysqk-img-r {
            display: flex;
            flex-direction: column;
            div {
              display: flex;
              flex-wrap: wrap;
              img {
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
        }
        .img-item {
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
      .pic-wrap {
        padding: 15px 24px 40px;
        .img-item {
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
    }
  }
}
.printModalWrap {
  width: 100%;
  margin-bottom: 20px;
  // min-height: 500px;
  border: 1px solid #8a8a8a;
  .print-title {
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #8a8a8a;
  }
  .print-middle {
    padding: 10px 15px;
    display: flex;
    border-bottom: 1px solid #8a8a8a;
    .middle-left {
      width: calc(100% - 250px);
      display: flex;
      flex-wrap: wrap;
      .middle-left-item {
        width: 30%;
        line-height: 26px;
        padding-right: 10px;
      }
    }
    .middle-right {
      width: 250px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .logo-img {
        width: 80px;
      }
    }
  }
  .print-table {
    padding: 10px 15px;
    .print-table-bottom {
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .table-bottom-left {
        display: flex;
      }
      .table-bottom-right {
        padding-right: 50px;
        display: flex;
        div {
          margin-left: 50px;
        }
      }
    }
    .paperInvoice {
      display: flex;
      flex-wrap: wrap;
      .paper-label {
        font-size: 14px;
      }
      img {
        width: 150px;
        height: 150px;
        margin-right: 10px;
      }
    }
  }
}
.print-bottom {
  display: flex;
  justify-content: center;
}
.pic-wrap {
  display: flex;
  flex-wrap: wrap;
}
// .form-row {
//   display: flex;
//   flex-wrap: wrap;
//   .form-col {
//     width: 50%;
//     flex-shrink: 0;
//   }
// }
// .form-btn {
//   width: 100%;
//   display: flex;
//   justify-content: center;
//   .btn {
//     margin: 10px 10px 0 0;
//   }
// }
// .img-item {
//   width: 100px;
//   height: 100px;
//   margin: 0px 10px 10px 0;
// }
// .table-wrap{
//   border: 1px solid #d9d9d9;
//   width: 1000px;
//   display:flex;
//   flex-wrap: wrap;
//   margin-bottom: 20px;

//   .table-item{
//     width:50%;
//     display: flex;
//     align-items: center;
//     line-height: 50px;
//     border: 1px solid #d9d9d9;
//     .item-label{
//       padding: 0 8px;
//       width: 180px;
//       border-right: 1px solid #d9d9d9;
//       background: rgb(244, 244, 244);
//     }
//     .item-right{
//       padding: 0 8px;
//       width: calc(100% - 180px);
//     }
//   }
// }
.dif {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
/deep/
.ant-steps-horizontal:not(.ant-steps-label-vertical)
.ant-steps-item-description {
  max-width: 300px !important;
  white-space: normal;
}
.dialog_bottom {
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    display: flex;
    justify-content: center;
    align-items: center;

    .dialog_pic {
      width: 48px;
      height: 48px;
      margin-right: 10px;
    }
  }
.editable-add-btn {
  margin-bottom: 8px;
}
}
</style>
